<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery2.0/jquery-2.0.0.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script>
        var i=1;
        var timer;
        function doStart(){
            $("#progress").css("width",i+"%");
            $("span").html(i+"%");
            if(i==30){
                $("#progress").removeClass("progress-bar-success");
                $("#progress").addClass("progress-bar-info");
            }else if(i==60){
                $("#progress").removeClass("progress-bar-info");
                $("#progress").addClass("progress-bar-danger");
            }else if(i==90){
                $("#progress").removeClass("progress-bar-danger");
                $("#progress").addClass("progress-bar-warning");
            }
            if(i==100){
                return;//结束函数的执行
            }
            i++;
            timer=setTimeout(doStart,100);
            
          
        }

        function doStop(){
            clearTimeout(timer);
        }
    </script>
</head>

<body>

    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" 
            aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="progress">
            <span></span>
        </div>
    </div>
    <div class="text-center">
        <input type="button" value="开始" class="btn btn-primary" onclick="doStart()">
        <input type="button" value="停止" class="btn btn-primary" onclick=doStop()>
    </div>
</body>

</html>